import React, {Component} from 'react';
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import cssModules from 'react-css-modules';
import {Form, Row, Button} from 'antd';
import {FormInput} from '../../component/FormItem';
import {addUnitInfo} from 'util/api';
import styles from './style.less';

@inject('HouseholdAddUnitStore')
@observer
@cssModules(styles)
class EditUnitContent extends Component {
  constructor(props) {
    super(props);
    this.store = this.props.HouseholdAddUnitStore;
  }

  render() {
    const {fields, handleFormChange} = this.store;
    let scale = Math.ceil((140 / 600) * 24);
    const formItemLayout = {
      labelCol: {
        sm: {span: scale},
      },
      wrapperCol: {
        sm: {span: 24 - scale},
      },
    };

    return (
      <Form
        {...formItemLayout}
        className={styles['edit_wrap']}
        autoComplete="off">
        <FormInput
          {...fields}
          onChange={handleFormChange}
          placeholder={'无'}
          label={'幢数'}
          disabled={true}
          name={'block'}
          rules={[{required: true, message: '必须填写内容!'}]}
        />
        <FormInput
          {...fields}
          onChange={handleFormChange}
          placeholder={'例如：欲添加2个单元，请输入2'}
          label={'单元'}
          disabled={true}
          name={'unit'}
          rules={[
            {required: true, message: '必须填写内容!'},
            {
              pattern: /^\d{1,}$/,
              message: '只能输入数字',
            },
          ]}
        />
        <FormInput
          {...fields}
          onChange={handleFormChange}
          placeholder={'(此处读取为设置该幢的统一密码，可修改)'}
          label={'修改密码'}
          type={'password'}
          disabled={false}
          name={'password'}
          rules={[
            {
              required: true,
              message: '必须填写内容!',
            },
            {
              pattern: /^[0-9]{6}$/,
              message: '请输入类型为数字的6位密码',
            },
          ]}
        />
      </Form>
    );
  }
}

export default EditUnitContent;
